<template>
<div>
    <el-form   v-loading.fullscreen.lock="loading"
             :model="form" ref="uploadForm" :rules="rules" label-width="120px"
             style="width: 600px" size="small">
      <el-form-item label="姓名" prop="name">
        <el-input disabled v-model="form.name" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="sex">
        <el-input disabled v-model="form.sex" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="身份证号" prop="identity">
        <el-input disabled v-model="form.identity" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书发布机构" prop="issuedBy" >
        <el-input v-model="form.issuedBy" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书名称" prop="certificateName" >
        <el-input v-model="form.certificateName" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书编号" prop="certificateNum" >
        <el-input v-model="form.certificateNum" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书级别" prop="certificateLevel" >
        <el-input v-model="form.certificateLevel" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="证书颁发日期" prop="certificateTime">
        <el-date-picker
            v-model="form.certificateTime"
            value-format="yyyy-MM-dd"
            type="date"
            placeholder="选择日期">
        </el-date-picker>
      </el-form-item>
      <el-form-item label="附件">
        <el-upload
            ref="upload"
            :action="`http://`+serverIp+`:9090/file/upload`"
            :on-exceed="handleExceed"
            :on-success="handleFileUploadSuccess"
            :on-error="handleFileUploadError"
            :auto-upload="true"
            multiple
            :limit="1"
            :file-list="fileList">
          <el-button size="small" type="primary">选择附件</el-button>
          <div slot="tip" class="el-upload__tip">附件大小不能超过1MB</div>
        </el-upload>
      </el-form-item>
      <el-form-item >
        <el-button type="primary" @click="upload">上 传</el-button>
        <el-button @click="cancel">取 消</el-button>
      </el-form-item>
    </el-form>

</div>
</template>

<script>

import {serverIp} from "../../public/config";
export default {
  name: "UploadCertificate",
  created() {
    this.form.userId=this.user.id
    this.form.name=this.user.realName
    this.form.sex=this.user.sex
    this.form.identity=this.user.identity

  },

  data(){
    return{
      serverIp: serverIp,
      loading:false,
      user:localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user")):{},
      form:{
        userId:'',
        name:'',
        sex:'',
        identity:'',
        issuedBy:'',
        certificateName:'',
        certificateNum:'',
        certificateLevel:'',
        attachment:''
      },
      //上传的文件
      fileList:[],
      rules: {
        identity: [
          {required: true, message: '身份证号为空', trigger: 'blur'},
        ],
        name: [
          {required: true, message: '身份证号为空', trigger: 'blur'},
        ],
        sex: [
          {required: true, message: '身份证号为空', trigger: 'blur'},
        ],
        issuedBy: [
          {required: true, message: '请输入证书发布机构', trigger: 'blur'},
        ],
        certificateName:[
          {required: true, message: '请输入证书名称', trigger: 'blur'},
        ],
        certificateNum:[
          {required: true, message: '请输入证书编号', trigger: 'blur'},
        ],
        certificateLevel: [
          {required: true, message: '请输入证书级别', trigger: 'blur'},
        ],
        certificateTime: [
          {required: true, message: '请输入证书颁发日期', trigger: 'blur'},
        ],

      }
    }
  },
  methods:{
    cancel(){
      this.form.issuedBy='';
      this.form.certificateName='';
      this.form.certificateNum='';
      this.form.certificateLevel='';
      this.form.certificateTime='';
      this.fileList=[];
    },
    async upload(){

      this.$refs['uploadForm'].validate((valid) => {
          if (valid) { //表单校验合法
            //新增证书 this.form.attachment=
            //   this.$refs.upload.submit();//上传附件 返回附件地址
              this.loading=true
              this.request.post("/certificates",this.form).then(res =>{
              if(res.code==='200'){
                this.loading=false
                this.$message.success("上传成功")
                this.cancel();
              }else{
                this.loading=false
                this.$message.error(res.msg)
              }
            })
            this.form.attachment='';
          }
        }
      );

    },
    handleExceed(files, fileList) {
      this.$message.warning('只能上传一个附件');
    },
    handleFileUploadSuccess(res){
      console.log("文件上传成功")
      console.log(res)
      this.form.attachment=res;

    },
    handleFileUploadError(res){
      console.log("文件上传失败")
      console.log(res)
      this.$message.error("文件上传失败")
    }
  }
}
</script>

<style scoped>

</style>